﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Collect.aspx.cs" Inherits="TakeoutMangesWeb.Collect" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"/>
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style type="text/css">
        /*页面顶部*/
        .up
        {
            width: 1050px;
            height: 90px;
            margin: 0 auto;
        }
        #Button1
        {
            margin-top: 30px;
            height: 36px;
        }
        .logo
        {
            float: left;
        }
        #logininfo
        {
            font-size: 20px;
            float: right;
            height: 34px;
        }
        #showinfo
        {
            font-size: 20px;
            float: right;
        }
        .logo img
        {
            width: 160px;
            height: 90px;
        }
        .top
        {
            width: 100%;
        }
        .Topleft ul
        {
            margin-top: 100px;
            text-align: center;
            overflow: hidden;
            padding: 0;
            height: 55px;
            line-height: 55px;
            margin: 0 auto;
        }
        
        .Topleft li
        {
            float: left;
            position: relative;
            overflow: hidden;
            height: 55px;
            width: 130px;
        }
        
        .Topleft li a
        {
            display: block;
            color: black;
            text-align: center;
            font-size: 20px;
            padding: 0px;
            overflow: hidden;
            text-decoration: none;
        }
        
        .Topleft li a:hover
        {
            background-color: khaki;
            color: gray;
        }
        
        .Topright
        {
            margin-top: 30px;
            width: 400px;
            float: right;
        }
        .dropdown
        {
            float:left;
        }
        /*页面部分*/
        #repeater
        {
            margin:0 auto;
            width: 1050px;
        }
            table
            {
                margin-top: 50px;
            	font-size: 15px;
            }
            table img
            {
            	width:120px;
            	height:100px;
            }
            #tr
            {
                margin:10px;
                height:150px;
            }
            .over
            {
            	float: right;
            	margin:10px;
            	width: 150px;
            	height: 50px;
            	line-height: 50px;
            	text-align: center;
            	background-color: orangered;
            } 
            #down
            {
            	margin: 0 auto;
            	width: 1100px;
            } 
            .over a
            {
            	display: block;
                color:white;
                text-decoration: none;
            }

            .b
            {
                font-size:16px;
            }
            #img1
			{
				width: 135px;
				height: 70px;
			}
			#img2
			{
				width: 100px;
				height: 50px;
			}
        /*页面底部*/
        #footer
        {
            margin: 0px auto;
            margin-top: 100px;
            float: left;
            width: 100%;
            height: 280px; /* footer的高度一定要是固定值*/
            background: #222222;
        }
        #footbody
        {
            padding-top: 50px;
            margin: 0px auto;
            width: 1100px;
            height: 200px;
        }
        #footleft
        {
            float: left;
            width: 800px;
            height: 200px;
            background: #222222;
        }
        .dd
        {
            float: left;
            width: 160px;
            height: 190px;
        }
        .dd > li
        {
            display: block;
            color: gray;
            text-align: center;
            padding: 1px;
        }
        .dd > li > a
        {
            text-decoration: none;
            color: gray;
            font-size: 10px;
        }
        .dd > li > a:hover
        {
            color: white;
        }
        #footright
        {
            float: left;
            width: 300px;
            height: 200px;
            background: #222222;
        }
        .rr
        {
            float: left;
            width: 140px;
            height: 50px;
            padding: 0;
        }
        .rr > li
        {
            display: block;
            color: gray;
            text-align: center;
            padding: 5px;
        }
        .broadcast
        {
            width: 1100px;
            height: 600px;
            background-color: #000000;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.7.2.js" ></script>
		<script type="text/javascript">
            $(function () {
                $("#CheckedAll").click(function () {
                    $("#tr input").prop("checked", $(this).prop("checked"));
                    //算出总价格
                    function total() {
                        //   获取所有已选复选框
                        var checked = $("#tr input:checked");
                        var total = 0;
                        //扫描累加
                        for (var i = 0; i < checked.length; i++) {
                            var goods_price = checked[i].attr("value");
                            var total_price = parseInt(goods_price);
                            total += total_price;
                        }
                        //渲染前端
                        $("#Label1").text(total);
                    }
                });
                $("#tr input").click(function () {
                    if ($("#tr input:checked").length == $("#tr input").length) {
                        $("#CheckedAll").prop("checked", true);
                    } else {
                        $("#CheckedAll").prop("checked", false);
                    }
                });
            });
        </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="up">
        <div class="logo">
            <img src="img/logo.jpg" alt=""/></div>
        <div class="container Topright">     
        <div id="logininfo" runat="server">
            <asp:Button ID="Button1" runat="server" Text="登录" class="btn btn-warning" 
                onclick="Button1_Click"/>
        </div>
        <div id="showinfo" runat="server">
	<div class="dropdown">
                <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        <span id="user" runat="server"></span>
        </button>
        <div class="dropdown-menu">
        <a class="dropdown-item" href="Collect.aspx">我的收藏</a>
      <asp:LinkButton ID="LinkButton1" class="dropdown-item" runat="server" onclick="LinkButton1_Click">退出登录</asp:LinkButton>
    </div>
    </div>
                <asp:Button ID="Button3" runat="server" Text="购物车" class="btn btn-danger" Height="36px" onclick="Button3_Click"/>
        </div>
        </div>
    </div>
    <div class="top">
        <div class="container Topleft">
            <ul>
                <li><a href="shopinfo.aspx">首页</a> </li>
                <li><a href='Shoptype.aspx?id=1'>快餐便当</a></li>
                <li><a href='Shoptype.aspx?id=2'>甜品饮品</a> </li>
                <li><a href='Shoptype.aspx?id=3'>汉堡薯条</a> </li>
                <li><a href='Shoptype.aspx?id=4'>蔬菜水果</a> </li>
                <li><a href='Shoptype.aspx?id=5'>特色小吃</a> </li>
            </ul>
        </div>
    </div>
    <div id="repeater">
        <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="Login.aspx">首页</a></li>
        <li class="breadcrumb-item active">我的收藏</li>
        </ol>
    <asp:Repeater ID="RepeaterCollect" runat="server" 
        onitemcommand="RepeaterCar_ItemCommand">
            <HeaderTemplate>
               <table class="table table-striped" align="center" cellspacing="0" width="1100px">
			<tr id="trstyle">
				<td>
                    <input type="checkbox" onclick="selectAll(this.checked)" id="CheckedAll" /> 全选
				</td>
				<td colspan="2">
					商品信息
				</td>
				<td>金额(元)</td>
				<td>操作</td>
			</tr>
            </HeaderTemplate>
            <ItemTemplate>
			<tr id="tr">
				<td>
                    <asp:HiddenField ID="HiddenField1" runat="server" Value='<%#Eval("ProductID")%>' />
                    <asp:HiddenField ID="HiddenField2" runat="server" Value='<%#Eval("ProductPrice")%>' />
                    <input type="checkbox" id="CheckBox1" name="check" value='<%#Eval("ProductPrice")%>' runat="server"/>
				</td>
				<td>
					<asp:Image ID="Image1" runat="server" ImageUrl='<%#Eval("ProductImage") %>' />
				</td>
				<td>
					<span><%#Eval("ProductName")%></span>
				</td>
				<td><b><%#Eval("ProductPrice")%>.00 元</b></td>
				<td>
                    <asp:LinkButton ID="LinkButton3" runat="server" CommandArgument='<%#Eval("ProductID")%>' CommandName='del'>取消收藏</asp:LinkButton></td>
             </tr>
                </ItemTemplate>
                <FooterTemplate>
                </table>
                </FooterTemplate>                 
            </asp:Repeater>
        <div class="over">
            <asp:LinkButton ID="LinkButton2" runat="server" OnClick="LinkButton2_Click">添加到购物车</asp:LinkButton>
        </div>
    </div>
    <div id="footer">
        <div id="footbody">
            <div id="footleft">
                <ul class="dd">
                    <li class="big">我是新手</li>
                    <li><a href="#">什么是道聚城</a></li>
                    <li><a href="#">如何购买</a></li>
                    <li><a href="#">如何赠送</a></li>
                    <li><a href="#">如何获取聚豆</a></li>
                </ul>
                <ul class="dd">
                    <li class="big">个人中心</li>
                    <li><a href="#">发货时间</a></li>
                    <li><a href="#">如何领取</a></li>
                    <li><a href="#">补发规则</a></li>
                    <li><a href="#">vip价定义</a></li>
                    <li><a href="#">道具状态定义</a></li>
                </ul>
                <ul class="dd">
                    <li class="big">支付方式</li>
                    <li><a href="#">支付方式</a></li>
                    <li><a href="#">购物点支付</a></li>
                    <li><a href="#">如何充值</a></li>
                </ul>
                <ul class="dd">
                    <li class="big">腾讯在线服务</li>
                    <li><a href="#">腾讯在线官方客服</a></li>
                </ul>
            </div>
            <div id="footright">
                <ul class="rr">
                    <li></li>
                    <li>二维码</li>
                </ul>
                <ul class="rr">
                    <li></li>
                    <li>二维码</li>
                </ul>
            </div>
        </div>
    </div>
    </form>
</body>
</html>
